<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { userinfoEmployeeList, userinfoBlockUserAccount, userinfoUnblockUser, userinfoCreateEmployeeAccount, userinfoEmployeeRole, userinfoEmployeeGender, userinfoMaritalStatus } from '@/apis/apis.js'
import { passwordRegex, phoneRegex } from '@/utils/utils.js'

const employeeRoleList = [
  {
    name: '总经理',
    type: 'P1'
  },
  {
    name: '店长',
    type: 'P2'
  },
  {
    name: '服务员',
    type: 'P3'
  },
  {
    name: '厨师',
    type: 'P4'
  },
  {
    name: '财务',
    type: 'P5'
  },
  {
    name: '保洁',
    type: 'P6'
  },
]
const maritalStatusList = [
  {
    name: '已婚',
    type: 'M1'
  },
  {
    name: '未婚',
    type: 'M2'
  },
  {
    name: '丧偶',
    type: 'M3'
  },
  {
    name: '离异',
    type: 'M4'
  },
]

const tableData = ref([])
const employeeRoleData = ref([])
const employeeGenderData = ref([])
const maritalStatusData = ref([])
const dialogVisible = ref(false)
const form = ref({
  employeeId: '',
  employeeName: '',
  employeePhoneNumber: '',
  employeeRole: '',
  employeeGender: '',
  maritalStatus: '',
  birthdays: '',
  hireDate: '',
  loginPassword: ''
})
const rules = ref({
  employeeId: [
    {
      required: true,
      message: '请输入工号',
      trigger: 'blur'
    },
  ],
  employeeName: [
    {
      required: true,
      message: '请输入员工姓名',
      trigger: 'blur'
    },
  ],
  employeePhoneNumber: [
    {
      required: true,
      message: '请输入员工手机号',
      trigger: 'blur'
    },
  ],
  employeeRole: [
    {
      required: true,
      message: '请选择员工职位',
      trigger: 'blur'
    },
  ],
  employeeGender: [
    {
      required: true,
      message: '请选择员工性别',
      trigger: 'blur'
    },
  ],
  maritalStatus: [
    {
      required: true,
      message: '请选择员工婚姻状况',
      trigger: 'blur'
    },
  ],
  birthdays: [
    {
      required: true,
      message: '选择员工生日',
      trigger: 'blur'
    },
  ],
  hireDate: [
    {
      required: true,
      message: '选择员工入职日期',
      trigger: 'blur'
    },
  ],
  loginPassword: [
    {
      required: true,
      message: '请分配一个登录密码',
      trigger: 'blur'
    },
  ],
})
const total = ref(0)
const page = ref(1)
const employeeName = ref('')
const employeeId = ref('')
const employeePhoneNumber = ref('')
const formRef = ref(null)

const getTableData = async () => {
  const res = await userinfoEmployeeList({
    employeeName: employeeName.value,
    employeeId: employeeId.value,
    employeePhoneNumber: employeePhoneNumber.value,
    page: page.value
  })
  tableData.value = res.data.res
  total.value = res.data.total
}

const getEmployeeRoleData = async () => {
  const res = await userinfoEmployeeRole()
  employeeRoleData.value = res.data
}

const getEmployeeGenderData = async () => {
  const res = await userinfoEmployeeGender()
  employeeGenderData.value = res.data
}

const getMaritalStatusData = async () => {
  const res = await userinfoMaritalStatus()
  maritalStatusData.value = res.data
}

const createEmployee = () => {
  dialogVisible.value = true
}

const filterSearch = () => {
  page.value = 1
  getTableData()
}

const reset = () => {
  employeeName.value = ''
  employeeId.value = ''
  employeePhoneNumber.value = ''
  page.value = 1
  getTableData()
}

const handleBlock = (row) => {
  ElMessageBox.confirm(
    `确定将${row.employeeName}拉进黑名单吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      await userinfoBlockUserAccount({ userId: row._id })
      getTableData()
    })
    .catch(err => {
      console.error(err.message)
    })
}

const handleUnblock = (row) => {
  ElMessageBox.confirm(
    `确定将${row.employeeName}移除黑名单吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      await userinfoUnblockUser({ userId: row._id })
      getTableData()
    })
    .catch(err => {
      console.error(err.message)
    })
}

const confirmSubmit = () => {
  formRef.value.validate(async (isValid) => {
    if (isValid) {
      try {
        phoneRegex(form.value.employeePhoneNumber)
        passwordRegex(form.value.loginPassword)
        await userinfoCreateEmployeeAccount(form.value)
        ElMessage({ type: 'info', message: '新增员工成功', duration: 1000 })
        dialogVisible.value = false
      }
      catch (err) {
        console.error(err.message)
      }
    }
  })
}

onMounted(async () => {
  await getTableData()
  await getEmployeeRoleData()
  await getEmployeeGenderData()
  await getMaritalStatusData()
})
</script>

<template>
  <el-card>
    <div style="margin-bottom: 20px;">
      <el-button type="warning" size="default" @click="createEmployee">创建员工账号</el-button>
    </div>
    <el-row :gutter="20">
      <el-col :span="5">
        <el-form-item label="姓名">
          <el-input placeholder="请输入姓名" v-model.trim="employeeName" />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="工号">
          <el-input placeholder="请输入工号" v-model.trim="employeeId" />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="手机号">
          <el-input placeholder="请输入手机号" v-model.trim="employeePhoneNumber" />
        </el-form-item>
      </el-col>
    </el-row>
    <div>
      <el-button type="warning" size="default" @click="filterSearch">查询</el-button>
      <el-button size="default" @click="reset">重置</el-button>
    </div>
    <el-table :data="tableData">
      <el-table-column label="员工工号" prop="employeeId" align="center" />
      <el-table-column label="姓名" prop="employeeName" align="center" />
      <el-table-column label="手机号" prop="employeePhoneNumber" align="center" />
      <el-table-column label="职位" prop="employeeRole" align="center">
        <template #default="{ row }">
          {{ employeeRoleList.find(value => value.type === row.employeeRole)?.name || '' }}
        </template>
      </el-table-column>
      <el-table-column label="性别" prop="employeeGender" align="center">
        <template #default="{ row }">
          {{ row.employeeGender === '1' ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column label="婚姻状态" prop="maritalStatus" align="center">
        <template #default="{ row }">
          {{ maritalStatusList.find(value => value.type === row.maritalStatus)?.name || '' }}
        </template>
      </el-table-column>
      <el-table-column label="生日" prop="birthdays" align="center" />
      <el-table-column label="入职时间" prop="hireDate" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button type="primary" size="default" link v-if="row.isBlocked"
            @click="handleUnblock(row)">移出黑名单</el-button>
          <el-button type="primary" size="default" link v-else @click="handleBlock(row)">拉黑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :hide-on-single-page="true" v-model:current-page="page" background layout="prev, pager, next"
      :total="total" @current-change="getTableData" />
  </el-card>
  <el-dialog v-model="dialogVisible" title="创建员工账号" style="width: 400px;">
    <el-form ref="formRef" :rules="rules" :model="form" label-position="top" size="small">
      <el-form-item label="工号" prop="employeeId">
        <el-input placeholder="请输入工号" v-model="form.employeeId" />
      </el-form-item>
      <el-form-item label="姓名" prop="employeeName">
        <el-input placeholder="请输入员工姓名" v-model="form.employeeName" />
      </el-form-item>
      <el-form-item label="手机号" prop="employeePhoneNumber">
        <el-input placeholder="请输入员工手机号" v-model="form.employeePhoneNumber" />
      </el-form-item>
      <el-form-item label="登录密码" prop="loginPassword">
        <el-input placeholder="请分配一个登录密码" v-model="form.loginPassword" />
      </el-form-item>
      <el-form-item label="员工职位" prop="employeeRole">
        <el-select v-model="form.employeeRole" placeholder="请选择员工职位" clearable @clear="form.employeeRole = ''">
          <el-option v-for="item in employeeRoleData" :key="item.type" :label="item.name" :value="item.type">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="员工性别" prop="employeeGender">
        <el-select v-model="form.employeeGender" placeholder="请选择员工性别" clearable @clear="form.employeeGender = ''">
          <el-option v-for="item in employeeGenderData" :key="item.type" :label="item.name" :value="item.type"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="员工婚姻状况" prop="maritalStatus">
        <el-select v-model="form.maritalStatus" placeholder="请选择员工婚姻状况" clearable @clear="form.maritalStatus = ''">
          <el-option v-for="item in maritalStatusData" :key="item.type" :label="item.name" :value="item.type">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="员工生日" prop="birthdays">
        <el-date-picker type="date" placeholder="选择员工生日" value-format="YYYY-MM-DD" v-model="form.birthdays" @clear="form.birthdays = ''" />
      </el-form-item>
      <el-form-item label="员工入职日期" prop="hireDate">
        <el-date-picker type="date" placeholder="选择员工入职日期" value-format="YYYY-MM-DD" v-model="form.hireDate" @clear="form.hireDate = ''" />
      </el-form-item>
    </el-form>
    <div style="text-align: center;">
      <el-button type="warning" size="small" @click="confirmSubmit">确定提交</el-button>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-table {
  margin-bottom: 20px;
}

.el-pagination {
  justify-content: center;
}

.el-form-item {
  margin-bottom: 10px;
}
</style>
